<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人脸识别</title>

    <link rel="stylesheet" type="text/css" href="../static/css/font.css" th:href="@{/css/font.css}"/>
    <link rel="stylesheet" type="text/css" href="../static/css/catch.css" th:href="@{/css/catch.css}"/>
</head>

<body>
<div>
    <!--    <h1 class="dynamic-heading">请正对屏幕</h1>-->
    <div class="wrap">
        <h1 id="cmyk">
            <span class="m">正</span>
            <span class="y">对</span>
            <span class="k">屏</span>
            <span class="c">幕</span>
        </h1>
    </div>

    <!-- 显示视频流的视频元素 -->
    <div class="gradient-border controller center-div left-adjust">
        <video id="video" width="640" height="480" autoplay></video>
    </div>

    <!-- 拍照按钮 -->
    <div class="home">
        <a id="capture" class="capture_a">
            <span>确定</span>
        </a>
        <!--    <span class="ok">确定</span>-->
    </div>
</div>

<div class="svg-container">
    <?xml version="1.0" standalone="no"?>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="4.25 16.279 175.302 194.531" width="176" height="250">
        <g>

            <ellipse vector-effect="non-scaling-stroke" cx="89.48046875000003" cy="198.02874173506012" rx="47.35546875" ry="10.546875" fill="rgb(255,192,203)"/>

            <g class="hand-left">
                <path d=" M 63.923 128.84 C 63.169 126.032 63.478 120.702 60.965 119.456 C 43.459 124.214 26.831 136.523 27.263 147.925 C 27.896 152.56 30.48 157.115 35.618 159.887 C 36.655 160.446 38.218 160.272 39.106 159.499 C 44.558 154.758 61.605 137.931 63.923 128.84 Z " fill="rgb(255,192,203)" vector-effect="non-scaling-stroke" stroke-width="4" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/>
                <path d=" M 26.966 148.24 Q 26.63 141.943 31 137.426 C 37.341 147.751 43.083 155.427 42.661 155.708 C 39.896 161.728 35.656 161.363 31.401 157.53 C 29.117 155.473 27.13 151.31 26.966 148.24 Z " fill="rgb(255,255,255)" vector-effect="non-scaling-stroke" stroke-width="3" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/>
            </g>
            <rect x="60" y="120" width="60" height="50" style="fill:palevioletred;stroke-miterlimit:10;" />
            <path d="M 73.43 117.667 L 104.903 117.667 C 111.579 117.667 117 123.087 117 129.764 L 117 158.903 C 117 165.579 111.579 171 104.903 171 L 73.43 171 C 66.754 171 61.333 165.579 61.333 158.903 L 61.333 129.764 C 61.333 123.087 66.754 117.667 73.43 117.667 Z" style="stroke:none;fill:pink;stroke-miterlimit:10;"/>

            <g class="body">
                <path d=" M 55.875 166.16 L 57.703 184.3 C 55.453 190.488 52.922 193.16 57.703 198.082 C 62.96 200.632 75 201.738 82.135 198.082 C 84.422 195.129 84.886 189.026 85.438 185.302 C 83.469 177.146 82.203 171.451 82.135 166.943" fill="rgb(255,192,203)" vector-effect="non-scaling-stroke" stroke-width="3" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/>

                <path class="tummy" d="" fill="rgb(255,192,203)" vector-effect="non-scaling-stroke" stroke-width="3" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"></path>

                <path class="back" d=" M 82.135 166.943 C 82.451 170.765 85.106 181.176 86.915 186.265 C 87.1 186.785 86.961 187.549 86.605 187.971 C 84.846 190.055 83.139 195.602 83.745 196.472 C 88.286 210.972 119.299 209.305 120.75 192.38 C 121.071 182.208 120.173 176.078 120.75 166.943 C 127.924 160.965 129.6 143.975 107 129" fill="rgb(255,192,203)" vector-effect="non-scaling-stroke" stroke-width="3" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/>
            </g>

            <g class="hand-right">
                <path d=" M 93.332 125.881 L 80.202 139.263 C 79.371 140.109 78.209 141.627 77.608 142.65 C 73.802 149.128 78.497 157.806 88.162 159.158 C 88.749 159.241 89.679 159.145 90.237 158.944 C 97.633 156.285 106.528 151.51 114.722 136.754 C 116.694 133.202 122.651 118.554 124.49 113.888" fill="rgb(255,192,203)" vector-effect="non-scaling-stroke" stroke-width="4" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/>
                <path d=" M 83.237 136.754 L 100.875 152.583 C 94.669 158.391 88.703 161.39 82.541 157.637 C 81.599 157.063 80.23 155.934 79.487 155.118 C 74.809 149.979 76.245 144.107 83.237 136.754 Z " fill="rgb(255,255,255)" vector-effect="non-scaling-stroke" stroke-width="4" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/>
            </g>
            <g class="lace">

                <path class="lace-left" d=" M 64.935 118.52 C 63.354 122.096 54.595 131.044 50.636 133.67" fill="none" vector-effect="non-scaling-stroke" stroke-width="2" stroke="rgb(237,91,54)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/>
                <path  class="lace-left-button" d=" M 45.463 133.512 C 46.031 132.096 47.598 131.39 48.958 131.936 C 50.318 132.482 50.962 134.075 50.393 135.491 C 49.825 136.907 48.259 137.613 46.898 137.067 C 45.538 136.521 44.895 134.928 45.463 133.512 Z " fill="rgb(237,91,54)"/>
            </g>
            <path class="lace-right" d=" M 71.033 120.968 C 69.562 126.572 60.297 137.644 56.625 139.219" fill="rgb(255,192,203)" vector-effect="non-scaling-stroke" stroke-width="2" stroke="rgb(237,91,54)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/>

            <path class="lace-right-button" d=" M 51.662 138.678 C 52.231 137.262 53.797 136.556 55.157 137.102 C 56.518 137.648 57.161 139.241 56.592 140.657 C 56.024 142.073 54.458 142.779 53.097 142.233 C 51.737 141.687 51.094 140.094 51.662 138.678 Z " fill="rgb(237,91,54)"/>
        </g>
        <g class="head">
            <path class="ear-left" d=" M 42.633 36.661 C 16.603 53.899 -1.068 114.47 32.303 115.015 C 56.303 115.348 46.253 88.727 47.636 62.015 L 47.636 39.348 C 47.636 36.037 45.394 34.833 42.633 36.661 Z " fill="rgb(0,0,0)" vector-effect="non-scaling-stroke" stroke-width="3" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/>
            <path d=" M 35.136 64.515 C 34.046 39.78 50.746 22.598 87.692 21.015 C 103.746 19.3 121.958 26.985 137.997 42.087 C 140.006 43.978 142.419 47.614 143.383 50.199 C 167.758 115.604 115.434 130.614 87.692 130.265 C 39.848 132.838 12.387 111.066 35.136 64.515" fill="rgb(255,192,203)" vector-effect="non-scaling-stroke" stroke-width="3" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/>
            <g class="face">
                <path  d=" M 76.823 49.452 C 130.636 51.515 131.386 129.327 71.198 121.452 L 71.198 121.452 L 71.198 121.452 L 71.198 121.452 C 9.136 116.765 38.011 45.89 76.823 49.452 Z " fill="rgb(255,255,255)" vector-effect="non-scaling-stroke" stroke-width="3" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/>
                <path d=" M 58.886 103.015 C 58.761 113.265 73.261 114.39 71.198 103.015" fill="rgb(237,133,113)" vector-effect="non-scaling-stroke" stroke-width="2" stroke="rgb(25,25,25)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/><line x1="65.136" y1="102.348" x2="65.136" y2="105.765" vector-effect="non-scaling-stroke" stroke-width="2" stroke="rgb(25,25,25)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/>
                <path d=" M 25.498 67.665 C 51.515 63.374 81.4 64.884 108.669 72.072 C 109.203 72.213 109.652 72.708 109.671 73.177 C 109.671 73.177 109.688 74.009 109.688 74.824 C 109.688 117.482 62.411 111.463 63.659 80.264 C 63.681 79.713 63.562 78.838 63.394 78.312 C 62.261 74.765 59.963 75.28 58.886 79.265 C 53.636 120.515 10.511 102.64 24.138 68.755 C 24.344 68.243 24.953 67.754 25.498 67.665 Z " fill="rgb(255,132,194)" vector-effect="non-scaling-stroke" stroke-width="3" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/>
                <path d=" M 29.202 90.519 C 27.462 86.624 27.25 80.791 28.396 74.001 C 28.488 73.457 29.01 73.015 29.562 73.015 L 50.511 73.015 C 51.063 73.015 51.519 73.463 51.528 74.015 C 51.745 86.723 47.589 94.525 39.988 96.177 C 39.449 96.295 38.563 96.388 38.011 96.386 C 34.211 96.369 30.942 94.413 29.202 90.519 Z " fill="rgb(0,0,0)" vector-effect="non-scaling-stroke" stroke-width="1" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/>
                <path d=" M 35.136 73.015 L 32.303 87.421 L 37.917 87.421 L 36.23 95.648 C 39.042 95.788 41.472 95.566 43.516 94.39 L 46.355 80.249 L 40.886 80.249 L 41.714 73.015 L 35.136 73.015 Z " fill="rgb(255,255,255)"/>
                <line x1="70.573" y1="102.348" x2="48.386" y2="102.348" vector-effect="non-scaling-stroke" stroke-width="2" stroke="rgb(25,25,25)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/>
                <path d=" M 72.138 91.139 C 70.373 86.873 70.061 81.291 71.062 74.006 C 71.137 73.459 71.644 73.064 72.192 73.124 L 96.523 75.797 C 97.62 75.917 98.542 76.911 98.581 78.014 C 99.011 90.289 93.771 97.59 84.261 97.89 C 78.237 98.367 74.198 96.119 72.138 91.139 Z " fill="rgb(0,0,0)" vector-effect="non-scaling-stroke" stroke-width="1" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/>
                <path d=" M 79.964 74.202 L 76.823 87.421 L 83.058 87.421 L 80.808 97.89 L 87.692 97.406 L 91.823 80.249 L 85.636 80.249 L 87.692 75.116 L 79.964 74.202 Z " fill="rgb(255,255,255)"/>
                <path d=" M 60.011 91.139 C 65.136 91.39 66.99 93.604 66.343 95.446 C 66.16 95.967 65.657 96.665 65.221 97.003 C 62.209 99.343 58.761 99.691 56.443 97.996 C 55.998 97.67 55.471 96.989 55.268 96.476 C 54.344 94.14 56.261 91.39 60.011 91.139 Z " fill="rgb(36,36,36)" vector-effect="non-scaling-stroke" stroke-width="1" stroke="rgb(28,27,27)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/>
                <clipPath id="_clipPath_UCbDOju39h645QNfSWIe6ToRjRwr0elM">
                    <path d=" M 60.011 91.139 C 65.136 91.39 66.99 93.604 66.343 95.446 C 66.16 95.967 65.657 96.665 65.221 97.003 C 62.209 99.343 58.761 99.691 56.443 97.996 C 55.998 97.67 55.471 96.989 55.268 96.476 C 54.344 94.14 56.261 91.39 60.011 91.139 Z " fill="rgb(36,36,36)" vector-effect="non-scaling-stroke" stroke-width="1" stroke="rgb(28,27,27)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/>
                </clipPath>
                <g clip-path="url(#_clipPath_UCbDOju39h645QNfSWIe6ToRjRwr0elM)">
                    <path d=" M 143.386 79.265 L 143.386 84.35 L 109.688 80.249 L 109.636 76.015 L 143.386 79.265 Z " fill="rgb(255,132,194)" vector-effect="non-scaling-stroke" stroke-width="2" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/>
                </g>
                <path d=" M 60.011 91.139 C 65.136 91.39 66.99 93.604 66.343 95.446 C 66.16 95.967 65.657 96.665 65.221 97.003 C 62.209 99.343 58.761 99.691 56.443 97.996 C 55.998 97.67 55.471 96.989 55.268 96.476 C 54.344 94.14 56.261 91.39 60.011 91.139 Z " fill="transparent" vector-effect="non-scaling-stroke" stroke-width="1" stroke="rgb(28,27,27)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/>
                <rect x="109.66" y="81.42" width="34.333" height="4.292" transform="matrix(0.99,0.141,-0.141,0.99,13.041,-17.037)" fill="rgb(255,132,194)" vector-effect="non-scaling-stroke" stroke-width="2" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="2"/>
            </g>

            <path class="ear-right" d=" M 133.494 37.986 C 119.605 35.652 87.636 93.635 103.563 112.818 C 104.57 114.031 106.536 115.579 107.95 116.274 C 124.655 124.484 143.652 114.494 149.186 91.492 C 150.046 87.917 150.537 82.037 150.281 78.369 C 149.234 63.348 145.699 48.231 133.494 37.986 Z " fill="rgb(0,0,0)" vector-effect="non-scaling-stroke" stroke-width="3" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/>
        </g>
        <path  d=" M 82 172.456 C 78.406 172.505 76.263 171.26 71.033 166.641" fill="none" vector-effect="non-scaling-stroke" stroke-width="2" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/>
        <path class="sparkleTL" d=" M 5 29.276 L 7.109 32.021 L 7.109 37.294 L 6.125 40.247 L 11.047 39.193 L 17.023 41.442 L 14.914 34.943 L 17.023 27.591 L 13.297 30.474 L 9.641 30.474 L 5 29.276 Z " fill="rgb(255,220,0)" vector-effect="non-scaling-stroke" stroke-width="0.5" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/>
        <path class="sparkleTR" d=" M 160.678 20.923 L 161.733 22.428 L 161.733 25.318 L 161.241 26.937 L 163.702 26.358 L 166.69 27.591 L 165.635 24.029 L 166.69 20 L 164.827 21.58 L 162.999 21.58 L 160.678 20.923 Z " fill="rgb(255,220,0)" vector-effect="non-scaling-stroke" stroke-width="0.5" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/>
        <path class="sparkleBR" d=" M 166.69 93.182 L 168.815 96.287 L 168.815 102.251 L 167.823 105.592 L 172.782 104.399 L 178.802 106.943 L 176.677 99.591 L 178.802 91.276 L 175.048 94.537 L 171.365 94.537 L 166.69 93.182 Z " fill="rgb(255,220,0)" vector-effect="non-scaling-stroke" stroke-width="0.5" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/>
        <path class="sparkleBL" d=" M 11.012 133.866 L 12.066 135.371 L 12.066 138.261 L 11.574 139.879 L 14.035 139.301 L 17.023 140.534 L 15.969 136.972 L 17.023 132.943 L 15.16 134.523 L 13.332 134.523 L 11.012 133.866 Z " fill="rgb(255,220,0)" vector-effect="non-scaling-stroke" stroke-width="0.5" stroke="rgb(255,220,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/>
        </g>
        </g>
    </svg>
</div>

<script>
    // 获取摄像头视频流
    navigator.mediaDevices.getUserMedia({video: true})
        .then(function (stream) {
            var video = document.getElementById('video');
            video.srcObject = stream;
            video.play();
        })
        .catch(function (err) {
            console.error("访问摄像头失败：", err);
        });

    // 获取拍照按钮和图片元素
    var captureButton = document.getElementById('capture');

    captureButton.addEventListener('click', function () {
        var canvas = document.createElement('canvas');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

        // 将照片数据转为Blob对象
        canvas.toBlob(function (blob) {
            // 创建FormData对象，用于构建表单数据
            var formData = new FormData();
            formData.append('photo', blob, 'photo.png');

            // 发送Ajax请求
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/admin/faceCheck', true);
            xhr.onload = function () {
                if (xhr.status === 200) {
                    // 不再解析 JSON，直接获取响应文本
                    var responseText = xhr.responseText;
                    // 根据后端返回的数据进行处理
                    var response = JSON.parse(responseText);
                    if (response.success) {
                        // 人脸检测成功，获取用户名和密码
                        var username = response.username;
                        var password = response.password;

                        // 在控制台中输出用户名和密码
                        console.log("Username:", username);
                        console.log("Password:", password);

                        // 人脸检测成功，跳转到指定页面
                        window.location.href = "/admin/facelogin?username=" + username + "&password=" + password;
                    } else {
                        console.log("FaceCheck Error:", response.message)
                    }
                } else {
                    // 请求失败，处理错误
                    console.error("人脸错误" + xhr.status);
                    //弹窗提示
                     alert('人脸未注册，请联系李延康');
                }
            };

            // 发送FormData对象
            xhr.send(formData);
        }, 'image/png');
    });
</script>

</body>
<script src="../static/js/catch.js" th:src="@{/js/catch.js}"></script>

</html>
